<template>
  <div class="image-card" :class="{'card-line': props.index == props.active_index}" :style="data.styles" @click="edit">
    <img class="img-size" :src="data.pics || placeholderImage" alt="图片" />
    <!-- <p v-if="!data.image">点击编辑图片广告</p> -->
    <div class="tooltip" :class="{'tooltip-block': props.index == props.active_index}">{{ props.index+1 }}号图片广告</div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, watch } from 'vue';

const props = defineProps({
  data: { type: Object as any, required: true },
  index: { type: Number || String, required: true },
  active_index: { type: Number || String, required: true }
});

const emit = defineEmits(['edit']);

const placeholderImage = 'https://files.hzahp.com/2024/static/image/nomal.webp'; // 默认占位图片

const edit = () => {
  console.log('图片组件点击了edit')
  emit('edit');
};

// 监听 data 的变化
watch(
  () => props.data,
  (newVal, oldVal) => {
    // console.log('data changed:', newVal, oldVal);
    // 在这里可以对 data 的变化进行处理
  },
  { deep: true } // 深度监听
);
</script>

<style scoped>
.image-card {
  position: relative;
  width: 375px;
  border: 1px dashed #ccc;
  margin-bottom: 0px;
  text-align: center;
  cursor: pointer;
}
.card-line{
  border: 2px solid var(--el-color-primary);
}
.image-card img {
  width: 100%;
  height: auto;
}
.tooltip {
  display: none; /* 默认隐藏 */
  position: absolute;
  left: -106px;
  top: 0;
  min-width: 80px;
  z-index: 1000; /* 确保 tooltip 显示在图片之上 */
  border: 1px solid #e0e0e0;
  box-sizing: border-box;
  font-size: 14px;
  min-height: 36px;
  line-height: 36px;
  padding: 4px 7px;
  color: #323232;
  background: #FFFFFF;
}
.tooltip:after {
    border-bottom: 6px solid transparent;
    border-left: 7px solid #fff;
    border-top: 6px solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    right: -6px;
    top: 13px;
    width: 0;
}
 
.image-card:hover .tooltip {
   /* 悬停时显示 */
  display: block;
}
.tooltip-block{
  display: block;
}
</style>
